<template>
  <section class="order">
    <el-col :span="24" class="action-bar">
		<!-- <span class="task-form-text">订单编号：</span>
      	<el-input class="action-bar-input" placeholder="输入订单号" v-model="orderNum"></el-input>
		  <el-col :span="5" :offset="1">
            <el-date-picker type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"  v-model="startTime" style="width: 100%;"></el-date-picker>
        </el-col> -->
        <!-- <el-col class="line" :span="1" style="text-align:center">-</el-col> -->
        <!-- <el-col :span="5">
            <el-date-picker type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"  v-model="endTime" style="width: 100%;"></el-date-picker>
        </el-col> -->
		<el-select v-model="orderStatus" clearable placeholder="兑换状态" style="margin:0 20px;">
                <el-option
                v-for="item in orderStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
		<el-button type="primary" size="medium" style="margin-left:20px" @click="ordersList">搜索</el-button>
    </el-col>
    <!--列表-->
		<el-table :data="tableData" highlight-current-row class="el-table-style">
			<el-table-column type="index" width="60"/>
			<el-table-column prop="name" label="用户昵称" width="120"/>
			<el-table-column prop="name" label="用户头像" width="120">
				<template slot-scope="scope">
				<div>
					<img :src="scope.row.photo_url" alt="" style="width:60px;height:60px;object-fit: cover;border-radius:50%">
				</div>
				</template>
			</el-table-column>
			<el-table-column prop="order_num" label="订单编号" min-width="250"/>
			<el-table-column label="订单状态" width="250">
				<template slot-scope="scope">
					<template  v-if="scope.row.status!=='2'">
						<el-tag size="middle" type="warning" v-if="scope.row.statusName=='待发货'">{{scope.row.statusName}}</el-tag>
						<el-tag size="middle" type="info" v-else-if="scope.row.statusName=='已取消'">{{scope.row.statusName}}</el-tag>
						<el-tag size="middle" type="success" v-else-if="scope.row.statusName=='待付款'">{{scope.row.statusName}}</el-tag>
						<el-tag size="middle" type="success" v-else-if="scope.row.statusName=='待收货'" effect="dark">{{scope.row.statusName}}</el-tag>
						<el-tag size="middle"  v-else>{{scope.row.statusName}}</el-tag>
					</template>
					<el-button v-else type="primary" size="mini" @click="changeOrderStatus(scope.row.id)" style="margin-left:10px">{{scope.row.statusName}}</el-button>
					<el-button v-show="scope.row.statusName=='待发货'" type="primary" size="mini" @click="getWriteShipInfo(scope.row.id)" style="margin-left:10px">发货信息填写</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="addr" label="操作" width="180">
				<template slot-scope="scope">
					<div>
						<el-button type="primary" size="mini" @click="toOrderDetail(scope.row.id)">查看详情</el-button>
					</div>
				</template>
			</el-table-column>
			</el-table>

				<el-col :span="24" class="footer-bar">
					<div class="page-code">
						<el-pagination
					background
					:page-size="limit"
					layout="prev, pager, next"
					:total="totalPage"
					@current-change="pageChange"
						>
				</el-pagination>
					</div>
			</el-col>

	<!-- 填写发货信息 -->
	<el-dialog
		title="设置发货信息"
      :visible.sync="emsDialogShow"
	  @close="initEms"
      >
      <el-form :label-position="'left'" label-width="80px"  >
        <el-form-item label="收件人" >
			<el-input v-model="ems.recipient"></el-input>
		</el-form-item>
		<el-form-item label="手机号" >
			<el-input v-model="ems.phone"></el-input>
		</el-form-item>
		<el-form-item label="邮政编码" >
			<el-input v-model="ems.zipcode"></el-input>
		</el-form-item>
		<el-form-item label="发货地址" >
			<el-input v-model="ems.address"></el-input>
		</el-form-item>
		<el-form-item label="发货公司" >
			<el-select v-model="ems.emsCompany" class="action-bar-input" placeholder="请选择">
				<el-option
				v-for="item in emsCompanyOptions"
				:key="item.id"
				:label="item.name"
				:value="item.id">
				</el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="配送单号" >
			<el-input v-model="ems.expressNum"></el-input>
		</el-form-item>
      </el-form>
	  <div slot="footer" class="dialog-footer">
			<el-button type="primary" @click="submit" >提交</el-button>
		</div>
	</el-dialog>
	<!-- 填写发货信息 -->

  </section>
</template>

<script>
export default {
	data(){
		return {
			orderStatus:'',//头部筛选的用户类型
            orderStatusOptions:[
                {label:'未确认',value:0},
                {label:'未兑换',value:1},
                {label:'待发货',value:2},
                {label:'已发货',value:3},
                {label:'已收货',value:4}
            ],

			user_token:'',
			startTime:'',//搜索的开始时间
			endTime:'',
			tableData:[],
			captureStateOptions:[{value:'已缴费'},{value:'未缴费'}],//缴费状态
			emsDialogShow:false,
			ems:{
				recipient:'',//收件人
				phone:'',
				zipcode:'',//邮政编码
				emsCompany:'',//发货公司
				address:'',
				expressNum:''
				
			},
			emsCompanyOptions:[],//快递公司
			orderNum:'',//搜索的订单编号
			page:1,
			totalPage:0,
			limit:16,
			shipInfoId:''//订单id
    
		}
  },
  methods: {
    handleClose(){
      //编辑弹窗关闭前的回调

	},
	initEms(){
		this.ems={
		  recipient:'',//收件人
		  phone:'',
		  zipcode:'',//邮政编码
		  emsCompany:'',//发货公司
		  address:'',
		  expressNum:''
		
	  }
	  this.shipInfoId=''
	},
	async submit(){
		let params={
			user_token:this.user_token,
			express_num :this.ems.expressNum,
			express_id:this.ems.emsCompany,
			id:this.shipInfoId
		}
		let res=await this.$api.setShipInfo(params);
		if(res.data.level=='success'){
                this.$message({
                    type:'success',
                    message:res.data.message
                })
				this.emsDialogShow=false;
				this.ordersList();
            }else{
                this.$message({
                type:'error',
                message:res.data.message
            })
            }
	},
	async ordersList(){
		//获取订单列表
		let parmas={
			page:this.page,
			limit:this.limit,
			start_time:this.startTime,
			end_time:this.endTime,
			status:this.orderStatus
		}
		let res=await this.$api.ordersList(parmas)
		if(res.data.level=='success'){
			this.tableData=res.data.data;
        	this.totalPage=res.data.page_info.total||0
		}
	},
	pageChange(e){
      this.page=e;
      this.ordersList()
    },
	async getWriteShipInfo(id){
		//获取发货信息
		this.shipInfoId=id;
		let parmas={
			id:id
		}
		let res=await this.$api.getWriteShipInfo(parmas);
		if(res.data.level=='success'){
			let data=res.data.data
			this.ems.recipient=data.name;
			this.ems.phone=data.phone;
			this.ems.zipcode=data.postcode;
			this.ems.address=data.Address;
			this.ems.expressNum=data.express_num;
			this.ems.emsCompany=data.express_id
			this.emsDialogShow=true
		}else{
			this.$message({
                type:'error',
                message:res.data.message
            })
		}
	},
	async getExpress(){
		//获取快递公司
		let res=await this.$api.getExpress({
			user_token:this.user_token
		})
		if(res.data.level=='success'){
			this.emsCompanyOptions=res.data.data;
		}
	},
	async changeOrderStatus(id){
		//改变订单状态
		let params={
			user_token:this.user_token,
			id
		}
		let res=await this.$api.changeOrderStatus(params);
		if(res.data.level=='success'){
                this.$message({
                    type:'success',
                    message:res.data.message
                })
				this.ordersList();
            }else{
                this.$message({
                type:'error',
                message:res.data.message
            })
            }
	},
	toOrderDetail(id){
		//跳转查看详情页
		this.$router.push({name:'OrderDetail',query:{id:id}})
	}
  },
  mounted() {
	  this.ordersList();
	//   this.getExpress()
  },
}
</script>
<style lang='scss' scoped>
  .order{
	  .task-form-text{
				color: #666666;
			}
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
      margin: 10px 0px;
      box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
      background: #f2f2f2;
      padding: 8px;
      margin: 10px 0px;
      box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}
  }
</style>

<style>
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}

 .order .el-dialog__body{overflow: auto;}
</style>
